/**
 * 需求1:点击申请数据,显示模态框
 *     2:点击关闭按钮,隐藏模态框
 */

//获取元素
let display = document.querySelectorAll('.apply-data')
let hide = document.querySelector('.closeBtn')
let mask = document.querySelector('.mask')
let clear = document.querySelector("#clearUserName")
let reg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
let reg2 = /^\d{6}$/
let user = document.querySelector("#userName")
let pwd = document.querySelector("#passWord")
let clear2 = document.querySelector("#clearPassWord")
let btn = document.querySelector("#loginBtn")
//显示模态框
display.forEach(function (dom) {
    dom.addEventListener('click', function () {
        mask.style.display = 'block'
    })
})
hide.addEventListener('click', function () {
    mask.style.display = 'none'
})
/**
 * 需求:1.当username内容为空时,图标不显示,反之显示
 *      2.点击叉叉图标清除input输入框
 */

userName.addEventListener('input', function () {
    if (userName.value === '') {
        clear.style.display = 'none'
    } else {
        clear.style.display = 'block'
    }
})
clear.addEventListener('click', function () {
    userName.value = ''
})

/**
 * 需求:鼠标点击菜单
 *      为当前菜单添加激活样式('.top-item')
 *      显示当前菜单对应的内容('.con-item)
 */
let menu = document.querySelectorAll('.top-item')
let content = document.querySelectorAll('.con-item')

//定义变量保存上一个菜单的索引
let index = 0;

menu.forEach(function (v, i) {
    v.addEventListener('click', function () {
        //清除上一个菜单的激活样式
        menu[index].classList.remove('active')

        //给当前菜单添加激活样式
        this.classList.add('active')

        //清除上一个菜单的激活样式
        content[index].classList.remove('on')
        //显示当前菜单对应的内容
        content[i].classList.add('on')

        //将单签索引赋值给index
        index = i
    })
})
//验证是否输入正确
      /**
     * 账号失去焦点时,验证手机号是否合法
     */
       user.addEventListener('blur',function(){
        
        //使用reg验证输入信息是否正确 == 布尔值
        let bool = reg.test(user.value)

        //判断
        if(bool){
            userMsg.textContent = ''//正确
        }else{
            userMsg.textContent = "账号不正确"//错误
        }
    })
     /**
     * 密码失去焦点时,验证密码是否合法
     * 当内容不为空时,隐藏提示内容
     */
      pwd.addEventListener('blur',function(){
        
        //使用reg验证输入信息是否正确 == 布尔值
        let bool = reg.test(pwd.value)
        //判断
        if(bool){
            pwdMsg.style.display = 'none'
            pwdMsg.textContent = ''//正确
        }else{
            pwdMsg.textContent = '6位数字密码'//错误
        }
    })
    /**
     * 点击登录按钮,验证手机号和密码是否合法
     */
     btn.addEventListener('click',function(){
        if(!reg.test(user.value)){
            userMsg.textContent = '手机号不正确'
        }else if(
            !reg2.test(pwd.value)){
                pwdMsg.textContent = '6位数字密码'
            }else{
                //跳转
                pwdMsg.style.display = 'none'
                location.href = '../pages/home.html'
            }
    })